<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title></title>
		<style type="text/css">
			.box{
				outline: 1px solid red;
				position: relative;
				.title{
					background-color: #fff;
					position: sticky;
					top: 0;
					padding: 0;
					margin: 0;
				}
				.content{
					height: 300px;
					background-color: #ccc;
				}
			}
		</style>
	</head>
	<body>
		<div class="main" style="position: relative;">
			<ol>
				<li class="box">
					<h1 class="title">title</h1>
					<div class="content">1111111</div>
				</li>
				<li class="box">
					<h1 class="title">title</h1>
					<div class="content">1111111</div>
				</li>
				<li class="box">
					<h1 class="title">title</h1>
					<div class="content">1111111</div>
				</li>
				<li class="box">
					<h1 class="title">title</h1>
					<div class="content">1111111</div>
				</li>
				<li class="box">
					<h1 class="title">title</h1>
					<div class="content">1111111</div>
				</li>
				<li class="box">
					<h1 class="title">title</h1>
					<div class="content">1111111</div>
				</li>

			</ol>
		</div>
	</body>
</html>
